/**
 * util
 * 封装常用的css样式类
 */

/* 页面全屏 */
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  display: block;
  overflow: hidden;
  z-index: 999;
  -webkit-overflow-scrolling: touch;
}

/* 圆角样式 */
.border-radius {
  border-radius: 4px !important;
}
.border-radius-round {
  border-radius: 100% !important;
}
.border-radius-ellipse {
  border-radius: 30px !important;
}

/* 字体强调 */
// 删除线
.text-delete-line {
  text-decoration: line-through;
}
// 下划线
.text-underline {
  border-bottom: solid 1px #4b4c50;
}
// 文字加粗
.text-bold {
  font-weight: bold;
}
// 文字加粗500
.text-bold-500 {
  font-weight: 500;
}
// 文字超出省略号
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 文字全部转大写
.text-uppercase {
  text-transform: uppercase;
}
// 文字全部转小写
.text-lowercase {
  text-transform: lowercase;
}
// 文字单词首字母转大写
.text-capitalize {
  text-transform: capitalize;
}

/* cursor鼠标样式 */
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-move {
  cursor: move;
}
.cursor-text {
  cursor: text;
}
.cursor-wait {
  cursor: wait;
}
.cursor-help {
  cursor: help;
}
.cursor-disabled {
  cursor: not-allowed;
}

/* 字体大小，12-36px */
.font-9 {
  font-size: 12px;
  transform: scale(0.75);
}
.font-10 {
  font-size: 12px;
  transform: scale(0.83);
}
.font-11 {
  font-size: 12px;
  transform: scale(0.9);
}
.font-12 {
  font-size: 12px;
}
.font-13 {
  font-size: 13px;
}
.font-14 {
  font-size: 14px;
}
.font-15 {
  font-size: 15px;
}
.font-16 {
  font-size: 16px;
}
.font-17 {
  font-size: 17px;
}
.font-18 {
  font-size: 18px;
}
.font-19 {
  font-size: 19px;
}
.font-20 {
  font-size: 20px;
}
.font-21 {
  font-size: 21px;
}
.font-22 {
  font-size: 22px;
}
.font-23 {
  font-size: 23px;
}
.font-24 {
  font-size: 24px;
}
.font-25 {
  font-size: 25px;
}
.font-26 {
  font-size: 26px;
}
.font-27 {
  font-size: 27px;
}
.font-28 {
  font-size: 28px;
}
.font-29 {
  font-size: 29px;
}
.font-30 {
  font-size: 30px;
}
.font-31 {
  font-size: 31px;
}
.font-32 {
  font-size: 32px;
}
.font-34 {
  font-size: 34px;
}
.font-36 {
  font-size: 36px;
}

/* 文本对齐方式 */
// 文本左对齐
.text-align-left {
  text-align: left;
}
// 文本居中对齐
.text-align-center {
  text-align: center;
}
// 文本右对齐
.text-align-right {
  text-align: right;
}
// 文本两端对齐
.text-align-justify {
  text-align: justify;
}

/* 元素垂直对齐方式 */
.vertical-align-top {
  vertical-align: top;
}
.vertical-align-middle {
  vertical-align: middle;
}
.vertical-align-bottom {
  vertical-align: bottom;
}

/* float布局 */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-none {
  float: none;
}
.float-clear:after {
  content: "";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

/* display布局 */
.display-none {
  display: none;
}
.display-inline {
  display: inline;
}
.display-block {
  display: block;
}
.display-inline-block {
  display: inline-block;
}

/* position布局 */
.position-absolute {
  position: absolute;
}
.position-fixed {
  position: fixed;
}
.position-relative {
  position: relative;
}
.position-static {
  position: static;
}
.position-inherit {
  position: inherit;
}

/* margin外边距 */
.margin-2 {
  margin: 2px;
}
.margin-4 {
  margin: 4px;
}
.margin-6 {
  margin: 6px;
}
.margin-8 {
  margin: 8px;
}
.margin-10 {
  margin: 10px;
}
.margin-12 {
  margin: 12px;
}
.margin-14 {
  margin: 14px;
}
.margin-16 {
  margin: 16px;
}
.margin-18 {
  margin: 18px;
}
.margin-20 {
  margin: 20px;
}
.margin-22 {
  margin: 22px;
}
.margin-24 {
  margin: 24px;
}
.margin-26 {
  margin: 26px;
}
.margin-28 {
  margin: 28px;
}
.margin-30 {
  margin: 30px;
}
.margin-36 {
  margin: 36px;
}
.margin-40 {
  margin: 40px;
}
/* margin上外边距 */
.margin-top-2 {
  margin-top: 2px;
}
.margin-top-4 {
  margin-top: 4px;
}
.margin-top-6 {
  margin-top: 6px;
}
.margin-top-8 {
  margin-top: 8px;
}
.margin-top-10 {
  margin-top: 10px;
}
.margin-top-12 {
  margin-top: 12px;
}
.margin-top-14 {
  margin-top: 14px;
}
.margin-top-16 {
  margin-top: 16px;
}
.margin-top-18 {
  margin-top: 18px;
}
.margin-top-20 {
  margin-top: 20px;
}
.margin-top-22 {
  margin-top: 22px;
}
.margin-top-24 {
  margin-top: 24px;
}
.margin-top-26 {
  margin-top: 26px;
}
.margin-top-28 {
  margin-top: 28px;
}
.margin-top-30 {
  margin-top: 30px;
}
.margin-top-36 {
  margin-top: 36px;
}
.margin-top-40 {
  margin-top: 40px;
}
/* margin下外边距 */
.margin-bottom-2 {
  margin-bottom: 2px;
}
.margin-bottom-4 {
  margin-bottom: 4px;
}
.margin-bottom-6 {
  margin-bottom: 6px;
}
.margin-bottom-8 {
  margin-bottom: 8px;
}
.margin-bottom-10 {
  margin-bottom: 10px;
}
.margin-bottom-12 {
  margin-bottom: 12px;
}
.margin-bottom-14 {
  margin-bottom: 14px;
}
.margin-bottom-16 {
  margin-bottom: 16px;
}
.margin-bottom-18 {
  margin-bottom: 18px;
}
.margin-bottom-20 {
  margin-bottom: 20px;
}
.margin-bottom-22 {
  margin-bottom: 22px;
}
.margin-bottom-24 {
  margin-bottom: 24px;
}
.margin-bottom-26 {
  margin-bottom: 26px;
}
.margin-bottom-28 {
  margin-bottom: 28px;
}
.margin-bottom-30 {
  margin-bottom: 30px;
}
.margin-bottom-36 {
  margin-bottom: 36px;
}
.margin-bottom-40 {
  margin-bottom: 40px;
}
/* margin左外边距 */
.margin-left-2 {
  margin-left: 2px;
}
.margin-left-4 {
  margin-left: 4px;
}
.margin-left-6 {
  margin-left: 6px;
}
.margin-left-8 {
  margin-left: 8px;
}
.margin-left-10 {
  margin-left: 10px;
}
.margin-left-12 {
  margin-left: 12px;
}
.margin-left-14 {
  margin-left: 14px;
}
.margin-left-16 {
  margin-left: 16px;
}
.margin-left-18 {
  margin-left: 18px;
}
.margin-left-20 {
  margin-left: 20px;
}
.margin-left-22 {
  margin-left: 22px;
}
.margin-left-24 {
  margin-left: 24px;
}
.margin-left-26 {
  margin-left: 26px;
}
.margin-left-28 {
  margin-left: 28px;
}
.margin-left-30 {
  margin-left: 30px;
}
.margin-left-36 {
  margin-left: 36px;
}
.margin-left-40 {
  margin-left: 40px;
}
/* margin右外边距 */
.margin-right-2 {
  margin-right: 2px;
}
.margin-right-4 {
  margin-right: 4px;
}
.margin-right-6 {
  margin-right: 6px;
}
.margin-right-8 {
  margin-right: 8px;
}
.margin-right-10 {
  margin-right: 10px;
}
.margin-right-12 {
  margin-right: 12px;
}
.margin-right-14 {
  margin-right: 14px;
}
.margin-right-16 {
  margin-right: 16px;
}
.margin-right-18 {
  margin-right: 18px;
}
.margin-right-20 {
  margin-right: 20px;
}
.margin-right-22 {
  margin-right: 22px;
}
.margin-right-24 {
  margin-right: 24px;
}
.margin-right-26 {
  margin-right: 26px;
}
.margin-right-28 {
  margin-right: 28px;
}
.margin-right-30 {
  margin-right: 30px;
}
.margin-right-36 {
  margin-right: 36px;
}
.margin-right-40 {
  margin-right: 40px;
}

/* padding内边距 */
.padding-2 {
  padding: 2px;
}
.padding-4 {
  padding: 4px;
}
.padding-6 {
  padding: 6px;
}
.padding-8 {
  padding: 8px;
}
.padding-10 {
  padding: 10px;
}
.padding-12 {
  padding: 12px;
}
.padding-14 {
  padding: 14px;
}
.padding-16 {
  padding: 16px;
}
.padding-18 {
  padding: 18px;
}
.padding-20 {
  padding: 20px;
}
.padding-22 {
  padding: 22px;
}
.padding-24 {
  padding: 24px;
}
.padding-26 {
  padding: 26px;
}
.padding-28 {
  padding: 28px;
}
.padding-30 {
  padding: 30px;
}
.padding-36 {
  padding: 36px;
}
.padding-40 {
  padding: 40px;
}
/* padding上内边距 */
.padding-top-2 {
  padding-top: 2px;
}
.padding-top-4 {
  padding-top: 4px;
}
.padding-top-6 {
  padding-top: 6px;
}
.padding-top-8 {
  padding-top: 8px;
}
.padding-top-10 {
  padding-top: 10px;
}
.padding-top-12 {
  padding-top: 12px;
}
.padding-top-14 {
  padding-top: 14px;
}
.padding-top-16 {
  padding-top: 16px;
}
.padding-top-18 {
  padding-top: 18px;
}
.padding-top-20 {
  padding-top: 20px;
}
.padding-top-22 {
  padding-top: 22px;
}
.padding-top-24 {
  padding-top: 24px;
}
.padding-top-26 {
  padding-top: 26px;
}
.padding-top-28 {
  padding-top: 28px;
}
.padding-top-30 {
  padding-top: 30px;
}
.padding-top-36 {
  padding-top: 36px;
}
.padding-top-40 {
  padding-top: 40px;
}
/* padding下内边距 */
.padding-bottom-2 {
  padding-bottom: 2px;
}
.padding-bottom-4 {
  padding-bottom: 4px;
}
.padding-bottom-6 {
  padding-bottom: 6px;
}
.padding-bottom-8 {
  padding-bottom: 8px;
}
.padding-bottom-10 {
  padding-bottom: 10px;
}
.padding-bottom-12 {
  padding-bottom: 12px;
}
.padding-bottom-14 {
  padding-bottom: 14px;
}
.padding-bottom-16 {
  padding-bottom: 16px;
}
.padding-bottom-18 {
  padding-bottom: 18px;
}
.padding-bottom-20 {
  padding-bottom: 20px;
}
.padding-bottom-22 {
  padding-bottom: 22px;
}
.padding-bottom-24 {
  padding-bottom: 24px;
}
.padding-bottom-26 {
  padding-bottom: 26px;
}
.padding-bottom-28 {
  padding-bottom: 28px;
}
.padding-bottom-30 {
  padding-bottom: 30px;
}
.padding-bottom-36 {
  padding-bottom: 36px;
}
.padding-bottom-40 {
  padding-bottom: 40px;
}
/* padding左内边距 */
.padding-left-2 {
  padding-left: 2px;
}
.padding-left-4 {
  padding-left: 4px;
}
.padding-left-6 {
  padding-left: 6px;
}
.padding-left-8 {
  padding-left: 8px;
}
.padding-left-10 {
  padding-left: 10px;
}
.padding-left-12 {
  padding-left: 12px;
}
.padding-left-14 {
  padding-left: 14px;
}
.padding-left-16 {
  padding-left: 16px;
}
.padding-left-18 {
  padding-left: 18px;
}
.padding-left-20 {
  padding-left: 20px;
}
.padding-left-22 {
  padding-left: 22px;
}
.padding-left-24 {
  padding-left: 24px;
}
.padding-left-26 {
  padding-left: 26px;
}
.padding-left-28 {
  padding-left: 28px;
}
.padding-left-30 {
  padding-left: 30px;
}
.padding-left-36 {
  padding-left: 36px;
}
.padding-left-40 {
  padding-left: 40px;
}
/* padding右内边距 */
.padding-right-2 {
  padding-right: 2px;
}
.padding-right-4 {
  padding-right: 4px;
}
.padding-right-6 {
  padding-right: 6px;
}
.padding-right-8 {
  padding-right: 8px;
}
.padding-right-10 {
  padding-right: 10px;
}
.padding-right-12 {
  padding-right: 12px;
}
.padding-right-14 {
  padding-right: 14px;
}
.padding-right-16 {
  padding-right: 16px;
}
.padding-right-18 {
  padding-right: 18px;
}
.padding-right-20 {
  padding-right: 20px;
}
.padding-right-22 {
  padding-right: 22px;
}
.padding-right-24 {
  padding-right: 24px;
}
.padding-right-26 {
  padding-right: 26px;
}
.padding-right-28 {
  padding-right: 28px;
}
.padding-right-30 {
  padding-right: 30px;
}
.padding-right-36 {
  padding-right: 36px;
}
.padding-right-40 {
  padding-right: 40px;
}

/* flex简易布局样式类 */
.display-flex {
  display: flex;
}
// 子元素flex
.display-flex .flex {
  flex: 1;
}
// 元素垂直居中
.display-flex.align-items-center {
  align-items: center;
}
// 元素横向居中
.display-flex.justify-content-center {
  justify-content: center;
}

/* affix固定位置 */
.affix {
  position: fixed;
  z-index: 998;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}
.affix.affix-top {
  top: 0;
}
.affix.affix-bottom {
  bottom: 0;
}
.affix.affix-left {
  left: 0;
}
.affix.affix-right {
  right: 0;
}
